/* eslint-disable prettier/prettier */
import React, {Component} from 'react';
import {
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  StatusBar,
} from 'react-native';
import {RNCamera} from 'react-native-camera';
import {Immersive} from 'react-native-immersive';
import {AnimatedCircularProgress} from 'react-native-circular-progress';
import Icon from 'react-native-vector-icons/Entypo';
export default class Camera extends Component {
  constructor(props) {
    super(props);
    this.show = this.show.bind(this);
    this.state = {
      isShow: false,
      isFlashOn: false, //闪光灯
      isRecording: false, //是否在录像
      uri: '',
      time: 0,
      timer: null,
      fill: 0,
    };
  }
  show() {
    this.setState({
      isShow: true,
    });
  }

  play(data) {
    this.setState({ isShow: false, isRecording: false });
    this.props.navigation.goBack();
    this.props.route.params.callback(data);

  }
  toggleFlash() {
    this.setState({isFlashOn: !this.state.isFlashOn});
    // alert(RNCamera.Constants.FlashMode.on)
  }
  downIcon() {
    if (this.state.isRecording === false) {
      return (
        <Icon
          name={'chevron-thin-down'}
          size={30}
          color={'#fff'}
          style={styles.down}
          onPress={ () => {
            this.props.navigation.goBack();
          }}
        />
      );
    } else {
      return null;
    }
  }
  isFlashOn() {
    if (this.state.isFlashOn === false) {
      return (
        <TouchableOpacity
          onPress={() => {
            this.toggleFlash();
          }}
        />
      );
    } else {
      return (
        <TouchableOpacity
          onPress={() => {
            this.toggleFlash();
          }}>
          <Text style={{fontSize: 30, color: 'white', fontFamily: 'iconfont'}}>
            &#xe633;
          </Text>
        </TouchableOpacity>
      );
    }
  }

  render() {
    // Immersive.on();
    // Immersive.setImmersive(true);
    return (
      <View style={styles.container}>
        <StatusBar translucent={true} backgroundColor="transparent" />
        <RNCamera
          style={styles.preview}
          /*前置或者后置摄像头*/
          type={RNCamera.Constants.Type.back}
          /*闪光灯是否开启*/
          flashMode={
            this.state.isFlashOn === true
              ? RNCamera.Constants.FlashMode.on
              : RNCamera.Constants.FlashMode.off
          }>
          {({camera, status}) => {
            return (
              <View
                style={{
                  flex: 0,
                  flexDirection: 'row',
                  justifyContent: 'center',
                }}>
                {this.downIcon()}

                <View style={{position: 'absolute', top: 30, left: -40}}>
                  {this.isFlashOn()}
                </View>
                {this.recordBtn(camera)}
              </View>
            );
          }}
        </RNCamera>
      </View>
    );
  }
  recordBtn(camera) {
    if (this.state.isRecording === false) {
      return (
        <TouchableOpacity
          onPress={() => this.takeRecord(camera)}
          style={styles.capture}>
          <Text style={{fontSize: 14}}> 摄像 </Text>
        </TouchableOpacity>
      );
    } else {
      return (
        <TouchableOpacity
          onPress={() => this.stopRecord(camera)}
          style={styles.circular}>
          {/* <Text style={ { fontSize: 14 } }> { this.state.time } </Text> */}
          <AnimatedCircularProgress
            ref={ (ref) => {
              this.circularProgress = ref;
            } }
            size={100}
            width={5}
            fill={100}
            prefill={0}
            tintColor="#00e0ff"
            onAnimationComplete={() =>console.log('end') }
            backgroundColor="#3d5875"
          />
        </TouchableOpacity>
      );
    }
  }
  // timer() {
  //   let t = 0;
  //   this.state.timer = setInterval(() => {
  //     if (this.state.time >= 0 && this.state.time < 15) {
  //       t = t + 1;

  //       this.setState({time: t});
  //     } else {
  //       clearInterval(this.state.timer);
  //       this.state.timer;
  //       this.setState({time: 0, timer: null});
  //     }
  //   }, 1000);
  // }
  //开始录像
  takeRecord =  function (camera) {
    this.setState({ isRecording: true }, async() => {
      // console.log(this.circularProgress);
      // this.timer();
      this.circularProgress.animate(100, 15000);
       const options = {
      quality: RNCamera.Constants.VideoQuality['480p'],
      maxFileSize: 100 * 1024 * 1024,
      maxDuration: 15,
    };
      const data = await camera.recordAsync(options);
      // this.props.fn(data);
      this.play(data);
    });
    //  var promise = CameraRoll.saveToCameraRoll(data.uri); // 在 Android 上，img是一个本地 URI，例如"file:///sdcard/img.png"。在 iOS， img可以是任意图片 URI
    //  promise.then(function (result) {
    //      console.log(result)
    //     //  alert('保存成功！地址如下：\n' + result);
    //  }).catch(function(error) {
    //     //  alert('保存失败！\n' + error);
    //  });

  };

  //停止录像
  stopRecord(camera) {
    camera.stopRecording();
  }
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
  circular: {
    flex: 0,
    position: 'absolute',
    bottom: 20,
    backgroundColor: 'transparent',
    borderRadius: 50,
    alignSelf: 'center',
    margin: 20,
  },
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  capture: {
    position: 'absolute',
    bottom: 20,
    backgroundColor: '#fff',
    borderWidth: 10,
    borderColor: '#D3D5D7',
    borderRadius: 5,
    padding: 15,
    borderRadius: 50,
    alignItems: 'center',
    justifyContent: 'center',
    width: 100,
    height: 100,
    paddingHorizontal: 20,
    alignSelf: 'center',
    margin: 20,
  },
  btnStyle: {
    flex: 0,
    backgroundColor: '#fff',
    borderRadius: 5,
    padding: 15,
    paddingHorizontal: 20,
    alignSelf: 'center',
    margin: 20,
  },
  down: {
    position: 'absolute',
    bottom: 60,
    left: -140,
  },
});
